<template>
	<div class="app-container">
		<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
			label-width="auto">
			<el-form-item label="登录IP地址" prop="ipaddr">
				<el-input v-model="queryParams.ipaddr" placeholder="请输入登录地址" clearable style="width: 240px;"
					@keyup.enter.native="handleQuery" />
			</el-form-item>

			<el-form-item label="登录状态" prop="status">
				<el-select v-model="queryParams.status" placeholder="登录状态" clearable style="width: 240px">
					<el-option v-for="dict in dict.type.sys_common_status" :key="dict.value" :label="dict.label"
						:value="dict.value" />
				</el-select>
			</el-form-item>

			<el-form-item>
				<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
				<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
			</el-form-item>
		</el-form>

		<el-row :gutter="10" class="mb8">
			<el-col :span="1.5">
				<el-button type="danger" icon="el-icon-delete" size="mini" :disabled="multiple"
					@click="handleDelete">删除</el-button>
			</el-col>
		</el-row>

		<el-table border ref="tables" fit v-loading="loading" :data="list" @selection-change="handleSelectionChange"
			:default-sort="defaultSort" @sort-change="handleSortChange">
			<el-table-column type="selection" width="55" align="center" />
			<el-table-column label="访问编号" align="center" prop="infoId" />
			<el-table-column label="用户名称" align="center" prop="userName" :show-overflow-tooltip="true" />
			<el-table-column label="登录地址" align="center" prop="ipaddr" width="130" :show-overflow-tooltip="true" />
			<el-table-column label="登录时间" align="center" prop="loginTime" min-width="130" :show-overflow-tooltip="true" />
			<el-table-column label="登录地点" align="center" prop="loginLocation" :show-overflow-tooltip="true" />
			<el-table-column label="浏览器" align="center" prop="browser" :show-overflow-tooltip="true" />
			<el-table-column label="操作系统" width="160" align="center" prop="os" />
			<el-table-column label="登录状态" align="center" prop="status">
				<template slot-scope="scope">
					<div>
						{{ loginStatus(scope.row.status) }}
					</div>
				</template>
			</el-table-column>
			<el-table-column label="操作信息" width="120" align="center" prop="msg" />
		</el-table>
		<div class="pagination">
			<el-pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
				:limit.sync="queryParams.pageSize" @current-change="changePage" />
		</div>
	</div>
</template>

<script>
	import {
		loginLogApi,
		removeLoginLogApi
	} from '@/api/system';
	export default {
		data() {
			return {
				queryParams: {
					ipaddr: '', // 登录IP地址
					status: '',
					page: 1,
					limit: 10,
				},
				dateRange: [],
				list: [],
				total: 0,
				loading: false,
				single: false,
				defaultSort: {
					prop: 'loginTime',
					order: 'descending'
				},
				showSearch: true,
				dict: {
					type: {
						sys_common_status: [{
								value: '1',
								label: '成功'
							},
							{
								value: '2',
								label: '失败'
							},
						]
					}
				},
				selectRow: [],
			};
		},
		computed: {
			multiple() {
				return (this.selectRow.length === 0 ? true : false)
			}
		},
		mounted() {
		  this.handleQuery();
		},
		methods: {
			async handleQuery() {
				// 搜索逻辑
				console.log(this.queryParams, 'queryParams');
				const res = await loginLogApi(this.queryParams)
				this.list = res.list
				this.total = res.total
				console.log(res, 'res');
			},
			resetQuery() {
				// 重置查询条件
				this.queryParams = {
					ipaddr: '',
					status: '',
					page: 1,
					limit: 10,
				}
				this.handleQuery();
			},
			async handleDelete() {
				// 删除逻辑
				try {
					const infoId = this.selectRow.map(v => v.infoId)
					const confirm = await this.$confirm('确认删除？')
					if (!confirm) return
					await removeLoginLogApi(infoId)
					this.handleQuery()
					this.$message.success('删除数据成功')

				} catch (error) {
					this.$message.error('删除数据失败！')
				}
			},
			handleSelectionChange(e) {
				// 选择改变逻辑
				this.selectRow = e
				console.log(e, 'eeee');
			},
			handleSortChange() {
				// 排序改变逻辑
			},
			changePage(e) {
				this.queryParams.page = e
				this.handleQuery()
				console.log(e, 'e');
			},
			parseTime(time) {
				// 日期格式化逻辑
			},
			loginStatus(status) {
				if (status == 1) {
					return "成功"
				} else if (status == 2) {
					return "失败"
				} else {
					return 'unknown'
				}
			}
		},
	};
</script>

<style scoped>
	.mb8 {
		margin-bottom: 24px;
	}

	.pagination {
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>
